<script setup lang="ts">
import { onMounted ,computed,ref, reactive} from 'vue'
import axios from 'axios'


interface Book {
  id: number
  book_name: string
  chapter_count: number
}

const search = ref('')
const filterTableData = computed(() =>
  tableData.filter(
    (data) =>
      !search.value ||
      data.name.toLowerCase().includes(search.value.toLowerCase())
  )
)
const handleEdit = (index: number, row: Book) => {
  console.log(index, row)
}
const handleDelete = (index: number, row: Book) => {
  console.log(index, row)
}

const tableData: Book[] = reactive([
])


const initData =async ()=>{
    console.log('ddd')
    let {data}=await axios.get('http://localhost:8080/textbook/index')

    tableData.push(...data.data)
    console.log(data)
}

onMounted(()=>{
    console.log('ddd111')
    initData()
})

 

</script>

<template> 
<div>
    <el-table :data="filterTableData" style="width: 100%">
    <el-table-column label="Date" prop="date" />
    <el-table-column label="Name" prop="book_name" />
    <el-table-column label="章节" prop="chapter_count" />
    <el-table-column align="right">
      <template #header>
        <el-input v-model="search" size="small" placeholder="Type to search" />
      </template>
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
          Edit
        </el-button>
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
        >
          Delete
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</div>
</template>

<style scoped></style>
